<!-- subpkg_consult/department/index.vue -->
<script lang="ts" setup>
import { departmentListApi } from '@/apis/consult';
import type { DepartData } from '@/types/consult';
import { computed, ref } from 'vue';

 defineProps<{
  type:number,
  illnessType:number
 }>()

 // 1.获取科室列表
  const departmentList = ref<DepartData[]>([])
 // 科室列表
  const getDepartmentList = async ()=>{
    const data = await departmentListApi()
    departmentList.value = data
    console.log(data);
    
 }
 getDepartmentList()

    // 2. 切换选中
  const active = ref(0)
  const onChange = (i:number) => {
    active.value = i
  }
  // 3.获取二级科室列表
    const childList = computed(() => {
    return departmentList.value[active.value]?.child
  })
</script>

<template>
  <view class="department-page">
    <scroll-view scroll-y class="department-primary">
      <view class="department-item " :class="{ active: active === index }"
       @click="onChange(index)"
       v-for="(item,index) in departmentList"
        :key="item.id" >{{ item.name }}</view>
    </scroll-view>
    <scroll-view class="department-secondary">
      <navigator
        hover-class="none"
        url="/subpkg_consult/description/index"
        class="department-item"
        v-for="item in childList"  :ket="item.id"

      >
        {{ item.name }}
      </navigator>
    </scroll-view>
  </view>
</template>

<style lang="scss">
  @import './index.scss';
</style>